<template>
	<view class="pages">

		<view class="flex-col section">
			<text @click="testFun()">机房巡检</text>
		</view>
		<!-- 搜索功能 -->
<!-- 		<view class="uni-search-box">
			<uni-search-bar v-model="keyword" ref="searchBar" radius="100" cancelButton="none" disabled
				:placeholder="inputPlaceholder" />
			<view class="cover-search-bar" @click="searchClick"></view>
		</view> -->

    <view class="flex-row section2">
          <view class="flex-col justify-center items-center" @click="addJieLong">
            <uni-icons type="plus-filled" size="30" color="#007AFF"></uni-icons>
             <text>发起接龙2</text>
          </view>
    </view>

		<view class="flex-col section3">
			<view v-for=" item in dataSource" class="flex-col item-content" @click="handleJieLong(item._id)">
					<view class="flex-row">
						 <view class="item-content-avater"></view>
						 <text>发起人</text>
					</view>
					<view class="item-content-diliver"></view>
					<view class="flex-row">
						<view class="image1-content">
              <image class="image1" src="/static/icon/no_pic.png" />
            </view>
						<view class="flex-col">
							<text>{{item.标题}}</text>
							<text>{{item.价格}}</text>
		
						</view>
					</view>
					
					<view class="flex-row">
						<view class="">4小时前</view>
						<view class="">14人看过</view>
						<view class="">5人以接龙</view>
					</view>
					
					
					<view class="flex-row">
						<view class="jielong-avtar"></view>
						<view class="jielong-avtar"></view>
						<view class="jielong-avtar"></view>
					</view>
					
					<view class="flex-row " style="justify-content: space-between;">
						<view class="">正在接龙</view>
						<view class="">
							<view class="">分享</view>
						</view>
					</view>
				</view>
				
			</view>
		
		
	</view>
</template>

<script>
	let cdbRef;
	import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";

	import Gps from '@/uni_modules/json-gps/js_sdk/gps.js';
	const gps = new Gps(),db = uniCloud.database();

	export default {
		components: {
			statusBar
		},
		computed: {
			inputPlaceholder(e) {
				if (uni.getStorageSync('CURRENT_LANG') == "en") {
					return 'Please enter the search content'
				} else {
					return '请输入搜索内容'
				}
			},
			colList(){
				return [
					db.collection('opendb-news-articles').where(this.where).field('avatar,title,last_modify_date,user_id').getTemp(),
					db.collection('uni-id-users').field('_id,nickname').getTemp()
				]
			}
		},
		data() {
			return {
				where: '"article_status" == 1',
				keyword: "",
				showRefresh: false,
				listHight: 0,
        gridList:[{text:"吼吼"},{text:"哈哈"}],
        page:1,
        dataSource:[],
			}
		},
		watch: {
			keyword(keyword, oldValue) {
				let where = '"article_status" == 1 '
				if (keyword) {
					this.where = where + `&& /${keyword}/.test(title)`;
				} else {
					this.where = where;
				}
			}
		},
		async onReady() {
			// #ifdef APP-NVUE
			/* 可用窗口高度 - 搜索框高 - 状态栏高 */
			this.listHight = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50 + 'px';
			// #endif
			// #ifndef APP-NVUE
			this.listHight = 'auto'
			// #endif
			cdbRef = this.$refs.udb
		},
		async onShow() {
     this.loadData()
		},
		methods: {
		  testFun(){
			  uniCloud.callFunction({
			      name: 'jielong',
			      data: {a:1,b:2}
			    })
			    .then(res => {
					console.log(res)
				});
		  },
		  loadData(){
           uniCloud.importObject("tb_jielong").list(this.page).then(res=>{
						 console.log(res.data)
             this.dataSource.push(...res.data)
					 })
					 
		  },
		  addJieLong(){
			uni.navigateTo({
			  url: '/pages/jielong/addjielong',
			});
		  },
			searchClick(e) { //点击搜索框
				uni.hideKeyboard();
				uni.navigateTo({
					url: '/pages/list/search/search',
					animationType: 'fade-in'
				});
			},
			retry() {
				this.refresh()
			},
			refresh() {
				cdbRef.loadData({
					clear: true
				}, () => {
					uni.stopPullDownRefresh()
					// #ifdef APP-NVUE
					this.showRefresh = false
					// #endif
					console.log('end');
				})
				console.log('refresh');
			},
		  handleJieLong(id){
			uni.navigateTo({
			  url:"/pages/jielong/joinjielong?id="+id
			})
		  },
			loadMore() {
				cdbRef.loadMore()
			},
			onqueryerror(e) {
				console.error(e);
			},
			onpullingdown(e) {
				console.log(e);
				this.showRefresh = true
				if(e.pullingDistance>100){
					this.refresh()
				}
			}
		},
		// #ifndef APP-NVUE
		onPullDownRefresh() {
			this.refresh()
		},
		onReachBottom() {
			this.loadMore()
		}
		// #endif
	}
</script>

<style scoped>
	.pages {
		//background-color: #FFFFFF;
    background-color: #f1f1f1;
	}

	.avatar {
		width: 200rpx;
		height: 200rpx;
		margin-right: 10rpx;
	}

	.main {
		justify-content: space-between;
		flex: 1;
	}

	.title {
		font-size: 16px;
	}

	.info {
		flex-direction: row;
		justify-content: space-between;
	}

	.author,
	.last_modify_date {
		font-size: 14px;
		color: #999999;
	}

	.uni-search-box {
		background-color: #FFFFFF;
		position: sticky;
		height: 50px;
		top: 0;
		left: 0;
		/* #ifndef APP-PLUS */
		z-index: 9;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		width: 580rpx;
		/* #endif */
	}
	.cover-search-bar {
		height: 50px;
		position: relative;
		top: -50px;
		margin-bottom: -50px;
		/* #ifndef APP-NVUE */
		z-index: 999;
		/* #endif */
	}
  .load-state{
    justify-content: center;
    width: 750rpx;
  }
  .section {
	  padding: 120rpx 28rpx 186rpx;
	  background-image: linear-gradient(180deg, #81e2fc 0%, #f1f1f1 100%);
  }
  .section2{
    margin-top: -80rpx;
    margin-left: 28rpx;
    margin-right: 28rpx;
    padding: 20rpx;
    background-color: #ffffff;
    border-radius: 20rpx;

  }
  .section3{
  	 padding: 20rpx 28rpx 136rpx;
	}
    .image1-content{
  	  width: 120rpx;
  	  height: 100rpx;
  	  background-color: #d6f7fc;
  	  margin:  10rpx;
	  border-radius: 10rpx;
    }
  .image1{
    width: 120rpx;
    height: 90rpx;
	margin-top: 10rpx;

  }
    .item-content{
  	 background-color: #ffffff;
  	 padding: 20rpx 28rpx 20rpx 28rpx; 
  	 /* height: 300rpx; */
  	 border-radius: 20rpx;
    }
    .item-content-diliver{
  	  height: 2rpx;
  	  background-color: #8f8f94;
    }
    .item-content-avater{
  	  background-color: #81e2fc;
  	  width: 50rpx;
  	  height: 50rpx;
  	  border-radius: 50%;
    }
    .jielong-avtar{
  	  background-color: #ff557f;
  	  width: 50rpx;
  	  height: 50rpx;
  	  border-radius: 50%;
  	  margin-right: -10rpx;
  	  border: 1px solid #f1f1f1;
    }
    .jielong-avtar2{
  	  background-color: #ff557f;
  	  width: 50rpx;
  	  height: 50rpx;
  	  padding-left: -10rpx;
  	  border-radius: 50%;
    }
  .text-area {
  	display: flex;
  	justify-content: center;
  }
  
  .title {
  	font-size: 36rpx;
  	color: #8f8f94;
  }
</style>
